<template>
    <div class="contents" @click.stop="otherclick">
        <div class="mapwrap">
            <ItemWrap v-if="showData" :style="{ right: offsetX, top: offsetY }" style="height: 270px; width: 620px"
                class="dialog" :title="mapTitle" @click.native.stop="isMapClick = false">
                <div class="close" @click.stop="showData = false">
                    <i class="el-input__icon el-icon-close"></i>
                </div>
                <!-- <MapData /> -->
            </ItemWrap>
        </div>
        <div class="content_left animate__animated animate__fadeInLeft" style="animation-duration: 1s;">
            <ItemPack class="content_lr-item" title="集仓宝" style="height: 890px">
                <Left />
            </ItemPack>
        </div>
        <div class="content_center">
            <TopCenter />
            <Center class="animate__animated animate__fadeInUp" style="animation-duration: 1s; z-index: 101;" />
        </div>
        <div class="content_right animate__animated animate__fadeInRight" style="animation-duration: 1s;">
            <ItemPack class="content_lr-item" title="临沂仓储" style="height: 890px">
                <Right />
            </ItemPack>
        </div>
    </div>
</template>

<script>
import Left from './ALeft/index.vue';
import Center from './ACenter/index.vue';
import Right from './ARight/index.vue';
import TopCenter from './ACenter/center-top.vue'

//   import MapData from './modal/map-data.vue';

export default {
    name: 'PackMain',
    components: {
        Left,
        Center,
        Right,
        TopCenter
        //   MapData,
    },
    data() {
        return {
            offsetX: 0,
            offsetY: 0,
            showData: false,
            isMapClick: false,
        };
    },
    methods: {
        // chartClick(params) {
        //     console.log('点击的数据:', params);
        //     this.isMapClick = true;
        //     const { name, event } = params;
        //     this.mapTitle = `${name === '最大值' ? '12月26日' : name}车辆通行记录`;
        //     this.offsetX = event.offsetX + 'px';
        //     this.offsetY = event.offsetY + 200 + 'px';

        //     this.showData = true;
        // },
        otherclick() {
            if (!this.isMapClick) {
                this.showData = false;
            }
            this.isMapClick = false;
        },
    },
};
</script>

<style lang="scss" scoped>
@import '~animate.css/animate.css';

.contents {

    padding-left: 240px;
    padding-right: 240px;
    width: calc(100% - 480px);

    .mapwrap {
        margin-top: -20px;
        margin-bottom: -50px;
        height: 580px;
        width: 100%;
        box-sizing: border-box;
        position: absolute;
        top: 0;

        .close {
            position: absolute;
            right: 15px;
            top: 10px;
            cursor: pointer;
        }

        .dialog {
            width: 400px;
            height: 200px;
            position: absolute;
            z-index: 999;
        }
    }

    .content_left,
    .content_right {
        width: 600px;
        box-sizing: border-box;
        margin-top: -50px;
        margin-bottom: 50px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        position: relative;
        // border: 1px solid red;
    }

    // 中间
    .content_center {
        width: 2680px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // border: 1px solid red;

    }

    //左右两侧 三个块
    .content_lr-item {
        width: 95%;
    }

    .content_center_top {
        width: 100%;
        height: 105px;
    }

    .content_center_bottom {
        display: flex;
        height: 250px;
    }
}
</style>